<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>CSS过渡</title>
    <script src="../../js/vue.js"></script>
    <style>
      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .slide-fade-enter-active {
        transition: all .3s ease;
      }
      .slide-fade-leave-active {
        transition:all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
    </style>
</head>
<body>
  <div id="databinding">
    <button v-on:click="show = !show">点我</button>
    <transition name="slide-fade" >
      <p v-if="show">KEVIN</p>
    </transition>
  </div>
  <script type="text/javascript">
    new Vue({
      el:'#databinding',
      data:{
        show:true
      }
    })
  </script>
</body>
</html>
